<template>
    <view>
    	<picker @change="PickerChange" :value="index" :range="picker" range-key="value" v-if="!isTree">
    		<view class="picker ofe" :class="classes">
    			<text class="ofe">{{index>0?picker[index].value:label}}</text> <text class="fa fa-angle-down padl1"></text>
    		</view>
    	</picker>
		
			<view class="" v-if="isTree">
				<view class="pos-r flrc" @tap="openChoice">
					<view class="flex1 tac padr2">
					{{dealWithText(index>=0?picker[index].value:label)}}
					<text class="fa fa-angle-down marl1"></text>
					</view>
				</view>
				<view class="cover" @tap="close" :class="anmiCover" v-if="showChoice">
					<view class="pos-a l0 r0 b0 bcf pad2" :class="anmi" style="max-height: 70vh;overflow-y: auto;">
						<view class="list-style-2 martb1">请选择</view>
						<view class="pad2 bdtda marlr5 pos-r round5" 
						v-for="item,index in picker" 
						@click.stop="pick(item.id,index,$event)">
							{{item.value}}
							<ripple></ripple>
						</view>
					</view>
				</view>
			</view>
    </view>
</template>

<script>
    export default {
        name: "scondition",
        props: {
            value:'',
			model:'',
			label:{
				type: String,
				default: "请选择"
			},
			placeholder:{
				type: String,
				default: "请选择"
			},
			classes:{
				type: String,
				default: "tac"
			},
			isTree:{
				type: Boolean,
				default: false
			}
        },
        data() {
            return {
                picker: [],
				index: -1,
				anmi: '',
				anmiCover: '',
				showChoice: false
            }
        },
        methods: {
			PickerChange(e) {
				// if(this.index === -1){this.index = 0}else{this.index = e.detail.value}
				this.index = e.detail.value
				this.$emit('input', this.picker[this.index].id)
			},
			openChoice() {
				this.anmi = "animation-slide-bottom"
				this.anmiCover = "animation-fade"
				this.showChoice = true
				setTimeout(() => {
					// this.anmi = "animation-slide-bottom"
					// this.anmiCover = "animation-fade"
					this.anmi = ""
					this.anmiCover = ""
				}, 300)
			},
			pick(id, index,e) {
				// if(this.index === -1){this.index = 0}else{this.index = e.detail.value}
				this.anmi = "animation-slide-bottom animation-reverse"
				setTimeout(() => {
					this.anmiCover = "animation-fade  animation-reverse"
				}, 100)
				setTimeout(() => {
					this.showChoice = false
					this.anmi = ""
					this.anmiCover = ""
				}, 400)
				this.index = index
				this.$emit('input', this.picker[this.index].id)
				// e.preventDefault()
				// e.preventBubble = true
				return false
			},
			close() {
				this.log("close")
				this.anmi = "animation-slide-bottom animation-reverse"
				setTimeout(() => {
					this.anmiCover = "animation-fade  animation-reverse"
				}, 100)
				setTimeout(() => {
					this.showChoice = false
					this.anmi = ""
					this.anmiCover = ""
				}, 400)
			},
			reload() {
				let condtion = {}
				if (this.$com.isbool(this.condtion)) {
					condtion = this.condtion
				}
				this.$api.get("/admin/" + this.model + '/choice', condtion, (res) => {
					this.picker = res.d
					if (this.$com.isbool(this.value)) {
						this.picker.map((data, index) => {
							if (data.id === this.value) {
								this.index = index
							}
						})
					}
				})
			},
			dealWithText(str){
				if(str == undefined ) return ''
				str= str.replace(/└/g,"")
				str= str.replace(/─/g,"")
				str= str.replace(/┤/g,"")
				return str
			}
        },
        mounted() {
            this.$api.get("/admin/" + this.model + '/choice',{isId:1},(res)=>{
				this.picker = [{id:"",value:this.label}].concat( res.d)
				if(this.$com.isbool(this.value)){
					this.picker.map((data,index)=>{
						if(data.id === this.value){this.index = index}
					})
				}
			})
        },
		watch:{
			value(curVal,oldVal){
				if(this.$com.isbool(curVal)){
					this.picker.map((data,index)=>{
						if(data.id === curVal){this.index = index}
					})
				}
			},
			index(curVal,oldVal){
				// if(this.$com.isbool(curVal)){
				// 	this.picker.map((data,index)=>{
				// 		if(data.id === curVal){this.index = index}
				// 	})
				// }
			}
		}
    }
</script>

<style>
    .cu-form-group .title {
    	min-width: calc(4em + 15px);
    }
</style>
